<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            list-style: none;
            text-decoration: none;
            font-size: 13px;
            color: #6c6c6c;
            box-sizing: border-box;
        }
        .tx{
            color: #f40;
        }
        .web-shop{
            min-width: 1170px;
            background: #f4f4f4;
        }
        /*头 */
        .web-shop .header{
            width: 100%;
            background-color: #f5f5f5;
        }
        .web-shop .header .container{
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 1168px;
            height: 35px;
            margin: 0 auto;
            line-height: 35px;
        }
        .web-shop .header .container .nav{
            display: flex;
        }
        .web-shop .header .container .nav li{
            padding: 0 14px;
            display: flex;
        }
        .web-shop .header .container .nav li a{
            position: relative;
            color: #6c6c6c;
            font-size: 12px;
            cursor: pointer;
        }
        .web-shop .header .container .nav li .arrow::after{
            content: '';
            position: absolute;
            right: -12px;
            top: 1px;
            width: 0px;
            height: 0px;
            margin-top: 15px;
            margin-left: 5px;
            border-top: 4px solid #aaa;
            border-right: 4px solid transparent;
            border-left: 4px solid transparent;
            border-bottom: 3px solid transparent;
        }
        .web-shop .header .container .nav .orange a{
            color: #f40;
        }
        .web-shop .header .container .nav a:hover{
            color: #f40;
            text-decoration: underline;
        }
        .web-shop .body-1{
            width: 1167px;
            margin: 0 auto;
        }
        /*输入框 */
        .web-shop .body-1 .search{
            height: 121px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .web-shop .body-1 .search .search-logo{
            width: 117px;
            height: 48px;
            background: url(images/logo.png)center center;
            cursor: pointer;
        }
        .body-1 .search .search-box{
            position: relative;
            padding-right: 30px;
        }
        .body-1 .search .search-box .search-tab{
            display: flex;
            position: absolute;
            left: 20px;
            background: #ff5400;
        }
        .body-1 .search .search-box .search-tab a{
            padding: 4px 10px;
            display: inline-block;
            color: #fff;
        }
        .body-1 .search .search-box .search-input{
            display: flex;
            height: 33px;
            padding-top: 26px;
        }
        .body-1 .search .search-box .search-input input{
            height: 39px;
            width: 554px;
            border: 3px solid #ff5400;
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
        }
        .body-1 .search .search-box .search-input .btn{
            height: 39px;
            width: 56px;
            border: 3px solid #ff5400;
            background: #ff5400;
            color: #fff;
            border-left: 0;
            border-top-right-radius: 20px;
            border-bottom-right-radius: 20px;
        }
        .body-1 .search .search-box .search-choose{
            display: flex;
            justify-content: space-between;
            margin-top: 31px;
        }
        /*导航栏*/
        .body-1 .nav{
            display: flex;
            height: 30px;
            background-color: #f4f4f4;
            line-height: 30px;
        }
        .body-1 .nav .li{
            display: flex;
            height: 30px;
            padding: 0 10px;
            color: gray;
            font-size: 16px;
            font-weight: 500;
        }
        .body-1 .nav .left-nav{
            width: 190px;
            text-align: center;
            font-size: 16px;
            background: #ff5000;
            color: #fff;
            line-height: 30px;
        }
        /*列表*/
        .body-1 .shop{
            display: flex;
            justify-content: space-between;
            height: 500px;
        }
        .body-1 .shop .left-items{
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 190px;
            height: 100%;
            padding-top: 10px;
            border: 1px solid #ff5000;
            border-top: 0;
            box-sizing: border-box;
        }
        .body-1 .shop .left-items .left-items-li{
            text-align: center;
            padding: 8px 15px;
        }
        .body-1 .shop .left-items .left-items-li:hover{
            background: #eeac94;
            color: #fff;
        }
        .body-1 .shop .left-items .left-items-li:hover a{
            color: #fff;
        }
        .body-1 .shop .left-items .left-items-content{
            position: absolute;
            top: 0;
            left: 187px;
            display: none;
            width: 500px;
            height: 100%;
            background: black;
            color:#fff
        }
        /*图片区*/
        .body-1 .shop .img-box{
            width: 700px;
            height: 500px;
            padding-top: 5px;
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            justify-content: space-between;
            box-sizing: border-box;
        }
        /*右边*/
        .body-1 .shop .tu-right{
            width: 275px;
            height: 495px;
            background-color: #fff;
            border: 1px solid #ff5000;
            border-top: 0;
        }
        .body-1 .shop .tu-right .icon-box{
            height: 97px;
            width: 100%;
            text-align: center;
        }
        .body-1 .shop .tu-right .right-icon img{
            width: 273px;
            height: 91px;
        }
        .body-1 .shop .tu-right .right-btn{
            display: flex;
            justify-content: space-around;
            width: 100%;
            height: 25px;
            margin-top: 8px;
            margin-bottom: 20px;
        }
        .body-1 .shop .tu-right .right-btn a{
            display: inline-block;
            width: 75px;
            line-height: 25px;
            text-align: center;
            color: #fff;
            background-color: #ff5000;
            border: 1px solid red;
            border-radius: 5px;
        }
        .body-1 .shop .tu-right .right-warn{
            width: 270px;
            height: 60px;
            line-height: 25px;
            text-align: center;
            margin: 0 auto;
            background-color: #fff;
        }
        .body-1 .shop .tu-right .right-info .info-top{
            display: flex;
            justify-content: space-around;
        }
        .body-1 .shop .tu-right .right-info .info-top li a:hover{
             color: tomato;
             text-decoration: underline;
        }
        .body-1 .shop .tu-right .right-info .info-border-bottom{
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            padding: 10px;
            box-sizing: border-box;
        }
        .body-1 .shop .tu-right .right-info .info-border-bottom li{
            font-size: 12px;
        }
        .body-1 .shop .tu-right .right-rechage{
            display: flex;
            flex-wrap: wrap;
            width: 100%;
        }
        .body-1 .shop .tu-right .right-rechage li{
            display: inline-block;
            width: 67.6px;
            padding: 3px;
            border: 1px solid #f4f4f4;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-sizing: border-box;
        }
        .body-1 .shop .tu-right .right-rechage li .icon{
            display: inline-block;
            height: 36px;
            width: 40px;
        }
        .body-1 .shop .tu-right .right-rechage li .icon-1{
            background: url(images/手机.png) 50% 0 no-repeat;
        }
        .body-1 .shop .tu-right .right-rechage li .icon-2{
            background: url(images/旅行.png) 50% -43px no-repeat;
        }
        .body-1 .shop .tu-right .right-rechage li .icon-3{
            background: url(images/车.png) 50% -86px no-repeat;
        }
        .body-1 .shop .tu-right .right-rechage li .icon-4{
            background: url(images/游戏.png) 50% -129px no-repeat;
        }
    </style>
</head>
<body>
   <div class="web-shop">
       <!--头-->
       <div class="header">
           <div class="container">
               <ul class="nav">
                   <li>
                       <select style="border: 0px;background-color: #f5f5f5;">
                           <option>
                               <a href="#" class="arrow">中国大陆</a>
                           </option>
                           <option>中国台湾</option>
                           <option>中国香港</option>
                       </select>
                   </li>
                   <li class="orange">
                       <a href="#">亲，请登录</a>
                   </li>
                   <li>
                      <a href="#">免费注册</a> 
                   </li>
                   <li>
                      <a href="#">手机逛淘宝</a> 
                   </li>
               </ul>
               <ul class="nav">
                   <li>
                       <a href="#" class="arrow">我的淘宝</a>
                   </li>
                   <li>
                      <a href="#" class="arrow">购物车</a> 
                   </li>
                   <li>
                       <span class="start"class="arrow"></span>
                       <a href="#">收藏夹</a>
                   </li>
                   <li>
                       <a href="#" class="arrow">商品分类</a>
                   </li>
                   <li>
                       <a href="#" class="arrow">卖家中心</a>
                   </li>
                   <li>
                       <a href="#" class="arrow">联系客服</a>
                   </li>
                   <li>
                       <a href="#" class="arrow">网站导航</a>
                   </li>
               </ul>
           </div>
       </div>
       <!--搜索框-->
       <div class="body-1">
           <div class="search">
               <div class="search-logo">
                   <img src="images/taobaowang (1).png" alt="">
                   <a href="https://www.taobao.com/"></a>
               </div>
               <div class="search-box">
                   <ul class="search-tab">
                       <a href="#" class="choose1">淘宝</a>
                       <a href="#">天猫</a>
                       <a href="#">店铺</a>
                   </ul>
                   <form class="search-input">
                       <input class="box1" type="text" name="search">
                       <button class="btn" type="submit">搜索</button>
                   </form>
                   <div class="search-choose">
                       <a href="#">新款连衣裙</a>
                       <a href="#">四件套</a>
                       <a href="#" class="tx">潮流T恤</a>
                       <a href="#">时尚女鞋</a>
                       <a href="#">短裤</a>
                       <a href="#">半身裙</a>
                       <a href="#">男士外套</a>
                       <a href="#">墙纸</a>
                       <a href="#">新款男装</a>
                       <a href="#">耳机</a>
                   </div>
               </div>
               <div class="search-code">
                   <a href="#">
                       <img src="images/cha.png" alt="" id="close">
                       <img src="images/二维码.png" alt="" style="width: 80px;height: 85px;">
                   </a>
               </div>
           </div>
           <!--导航栏-->
           <ul class="nav">
               <li class="left-nav">主题市场</li>
               <li class="li"style="color: red;font-weight: bold;">天猫</li>
               <li class="li" style="color: red;font-weight: bold;">聚划算</li>
               <li class="li" style="color: green;font-weight: bold;">天猫超市</li>
               <li class="li">|</li>
               <li class="li">司法拍卖</li>
               <li class="li">飞猪旅行</li>
               <li class="li">天天特卖</li>
               <li class="li">淘小铺</li>
               <li class="li">|</li>
               <li class="li">造点新货</li>
               <li class="li">苏宁易购</li>
               <li class="li">淘宝新选</li>
               <li class="li">智能生活</li>
           </ul>
           <div class="shop" id="">
               <!--左侧功能条-->
               <ul class="left-items" id="left-items">
                   <li class="left-items-li">
                       <a href="#">女装</a>/
                       <a href="#">男装</a>/
                       <a href="#">内衣</a>
                   </li>
                   <li class="left-items-li">
                       <a href="#">女鞋</a>/
                       <a href="#">男鞋</a>/
                       <a href="#">箱包</a>
                   </li>
                   <li class="left-items-li">
                       <a href="#">母婴</a>/
                       <a href="#">童装</a>/
                       <a href="#">玩具</a>
                   </li>
                   <li class="left-items-li">
                       <a href="#">男装</a>/
                       <a href="#">运动户外</a>
                   </li>
                   <li class="left-items-li">
                       <a href="#">美妆</a>/
                       <a href="#">彩妆</a>/
                       <a href="#">个护</a>
                   </li>
                   <li class="left-items-li">
                       <a href="#">手机</a>/
                       <a href="#">数码</a>/
                       <a href="#">企业</a>
                   </li>
                   <li class="left-items-li">
                       <a href="#">大家电</a>/
                       <a href="#">生活电器</a>
                   </li>
                   <li class="left-items-li">
                       <a href="#">零食</a>/
                       <a href="#">生鲜</a>/
                       <a href="#">茶酒</a>
                   </li>
                   <li class="left-items-li">
                       <a href="#">厨具</a>/
                       <a href="#">收纳</a>/
                       <a href="#">清洁</a>
                   </li>
                   <li class="left-items-li">
                       <a href="#">家纺</a>/
                       <a href="#">家饰</a>/
                       <a href="#">鲜花</a>
                   </li>
                   <li class="left-items-li">
                       <a href="#">图书音像</a>/
                       <a href="#">文具</a>
                   </li>
                   <li class="left-items-li">
                       <a href="#">医药保健</a>/
                       <a href="#">进口</a>
                   </li>
                   <li class="left-items-li">
                       <a href="#">汽车</a>/
                       <a href="#">二手车</a>/
                       <a href="#">用品</a>
                   </li>
                   <li class="left-items-li">
                       <a href="#">房产</a>/
                       <a href="#">装修家具</a>/
                       <a href="#">建材</a>
                   </li>
                   <div class="left-items-content" id="left-items-content">
   
                   </div>
               </ul>
               <!--图片展示-->
               <div class="img-box">
                   <div>
                       <img src="images/2.png" alt="">
                       <img src="images/tu2.webp" alt="">
                   </div>
                   <div style="height: 4px;">
                       <span style="color: red;font-weight: bold;">TMLL天猫</span>
                       <span style="color: gray;">理想生活上天猫</span>
                   </div>
                   <div>
                       <img src="images/.png" alt="">
                       <img src="images/tu3-1.jpg" alt="">
                       <img src="images/tu4.jpg" alt="">
                   </div>
               </div>
               <!--信息展示-->
               <div class="tu-right">
                   <div class="right-icon">
                       <img src="images/你好.PNG" alt="">
                   </div>
                   <div class="right-btn">
                       <a href="#">登录</a>
                       <a href="#">注册</a>
                       <a href="#">开店</a>
                   </div>
                   <div class="right-warn"><img src="images/1.png" alt="" style="width: 270px;height: 60px;"></div>
                   <div class="right-info">
                       <ul class="info-top">
                           <li><a href="#">公告</a></li>
                           <li><a href="#">规则</a></li>
                           <li><a href="#">安全</a></li>
                           <li><a href="#">公益</a></li>
                           <li><a href="#">千牛</a></li>
                       </ul>
                       <ul class="info-bottom">
                           <li style="font-weight: bold;text-align: center;">关于加强卖家广告（含弹窗）合现宣传的公告</li>
                       </ul>
                   </div>
                   <ul class="right-rechage">
                       <li><a class="icon icon-1" href="#"></a>
                           <p>充话费</p>
                       </li>
                       <li><a class="icon icon-2" href="#"></a>
                           <p>旅行</p>
                       </li>
                       <li><a class="icon icon-3" href="#"></a>
                           <p>车险</p>
                       </li>
                       <li><a class="icon icon-4" href="#"></a>
                           <p>游戏</p>
                       </li>
                       <li><a href="#" class="icon icon-1"></a>
                           <p>充话费</p>
                       </li>
                       <li><a href="#" class="icon icon-2"></a>
                           <p>旅行</p>
                       </li>
                       <li><a href="#" class="icon icon-3"></a>
                           <p>车险</p>
                       </li>
                       <li><a href="#" class="icon icon-4"></a>
                           <p>游戏</p>
                       </li>
                       <li><a href="#" class="icon icon-1"></a>
                           <p>充话费</p>
                       </li>
                       <li><a href="#" class="icon icon-2"></a>
                           <p>旅行</p>
                       </li>
                       <li><a href="#" class="icon icon-3"></a>
                           <p>车险</p>
                       </li>
                       <li><a href="#" class="icon icon-4"></a>
                           <p>游戏</p>
                       </li>
                       <li><a href="#" class="icon icon-1"></a>
                           <p>充话费</p>
                       </li>
                       <li><a href="#" class="icon icon-2"></a>
                           <p>旅行</p>
                       </li>
                       <li><a href="#" class="icon icon-3"></a>
                           <p>车险</p>
                       </li>
                       <li><a href="#" class="icon icon-4"></a>
                           <p>游戏</p>
                       </li>
                   </ul>
               </div>
           </div>
</body>
</html>